<template>
  <div id="com-tree" v-loading="treeLoading">
    <el-button @click="showNodeDialog('root')">添加根节点</el-button>
    <el-input
      type="text"
      placeholder="请输入搜索内容"
      v-model="searchText"
      @input="filter"
    >
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
    </el-input>
    <!-- tree -->
    <el-tree
      :data="treeList"
      :props="defaultProps"
      @node-contextmenu="onContextMenu"
      @node-click="onActiveClick"
      highlight-current
      :filter-node-method="filterNode"
      ref="tree"
    >
    </el-tree>
    <!-- dialog部分 -->
    <el-dialog :title="addNodeTitle" :visible.sync="visibleAddNodeDialog">
      <el-form>
        <el-form-item label="名称">
          <el-input v-model="addNodeData.tableName"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="addNodeData.tableSort"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visibleAddNodeDialog = false">取消</el-button>
        <el-button type="primary" @click="saveNode">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
const contextMenuList = [
  {
    label: "添加下级节点",
    tyep: "lower",
  },
  {
    label: "修改",
    tyep: "update",
  },
  {
    label: "删除",
    tyep: "delete",
  },
];
export default {
  name: "comTree",
  data() {
    return {
      searchText: "",
      treeLoading: true,
      treeList: [],
      defaultProps: {
        children: "children",
        label: "tableName",
      },
      activeNode: null,
      addNodeTitle: "",
      addNodeData: {
        tableName: "",
        tableSort: "",
      },
      visibleAddNodeDialog: false,
      addNodetype: null,
      visibleContextMenu: false,
    };
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.tableName.indexOf(value) !== -1;
    },
    filter(val) {
      this.$refs.tree.filter(val);
    },
    //删除节点
    deletedNode() {
      if (this.activeNode === null) {
        this.$message.error("未选中节点");
      } else {
        this.$confirm(`是否删除 ${this.activeNode.tableName} ?`).then(
          async () => {
            await this.$http({
              data: {
                tableId: this.activeNode.tableId,
              },
              url: "form/table-template/deletedNode",
            });
            this.getTableList();
          }
        );
      }
    },
    //保存节点
    async saveNode() {
      switch (this.addNodetype) {
        //保存根节点
        case "root":
          await this.$http({
            data: this.addNodeData,
            url: "form/table-template/insertRootNode",
          });
          break;
        // 保存下级节点
        case "lower":
          if (this.activeNode === null) {
            this.$message.error("未选中节点");
          } else {
            await this.$http({
              data: {
                ...this.addNodeData,
                tableParentId: this.activeNode.tableId,
              },
              url: "form/table-template/insertLowerNode",
            });
          }
          break;
        // 编辑节点
        case "update":
          await this.$http({
            data: {
              ...this.addNodeData,
              tableId: this.activeNode.tableId,
            },
            url: "form/table-template/updateNode",
          });
          break;
      }
      this.getTableList();
      this.visibleAddNodeDialog = false;
    },
    showNodeDialog(tyep) {
      this.addNodeData.tableName = "";
      this.addNodeData.tableSort = "";
      switch (tyep) {
        case "root":
          this.addNodeTitle = "添加根节点";
          this.addNodetype = "root";
          break;
        case "lower":
          this.addNodeTitle = "添加下级节点";
          this.addNodetype = "lower";
          break;
        case "update":
          if (this.activeNode === null) {
            return this.$message.error("未选中节点");
          }
          this.addNodeData.tableName = this.activeNode.tableName;
          this.addNodeData.tableSort = this.activeNode.tableSort;
          this.addNodeTitle = "编辑节点";
          this.addNodetype = "update";
      }

      this.visibleAddNodeDialog = true;
    },
    //右键-显示菜单
    onContextMenu(event, data) {
      this.activeNode = data;
      this.$contextMenu({
        event,
        list: contextMenuList,
      }).then((item) => {
        if (item.tyep == "delete") {
          this.deletedNode();
        } else {
          this.showNodeDialog(item.tyep);
        }
      });
    },
    //选中某节点
    onActiveClick(data) {
      this.$emit("nodeClick", data);
      this.$contextMenu.close();
    },
    //初始化获取数据
    async getTableList() {
      const res = await this.$http({
        data: {},
        url: "form/table-template/getTableList",
      });
      this.treeLoading = false;
      this.treeList = res;
    },
  },
  created() {
    this.getTableList();
  },
};
</script>